"use client";
import { useEffect, useState } from "react";
import { List, Typography } from "antd";
import { useRouter } from "next/navigation";

export default function ListPage() {
  const router = useRouter()
  const [data, setData] = useState<{ id: number; name: string }[]>([]);
  useEffect(() => {
    fetch("/api/goods")
      .then((res) => res.json())
      .then((res) => {
        setData(res.data);
      });
  }, []);

  // !跳转
  const handleClick = (id: number) => {
    router.push(`/list/${id}`)
  }
  return (
    <div className="w-3/4 mx-auto mt-10">
      <List
        header={<div>Header</div>}
        footer={<div>Footer</div>}
        bordered
        dataSource={data}
        renderItem={(item) => (
          <List.Item onClick={() => handleClick(item.id)}>
            <Typography.Text mark>[ITEM]</Typography.Text> {item.name}
          </List.Item>
        )}
      />
    </div>
  );
}